<template>
  <div>
    <myDivider name="车辆绑定"></myDivider>
    <el-page-header @back="$router.go(-1)">
    </el-page-header>
    <div class="wholePage">
      <!-- 详情 -->
      <el-form ref="detailForm" :model="detailForm" label-width="150px" style="width: 1250px;margin-bottom: 50px;">
        <el-row>
          <el-col :span="6">
            <el-form-item label="小区名称:">
              <el-input size="small" v-model="detailForm.rqName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="车位号:">
              <el-input size="small" v-model="detailForm.code" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="归属人:">
              <el-input size="small" v-model="detailForm.belongUserName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式:">
              <el-input size="small" v-model="detailForm.belongUserPhoneNumber" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="租赁人:">
              <el-input size="small" v-model="detailForm.tenantUserName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式:">
              <el-input size="small" v-model="detailForm.tenantUserPhoneNumber" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产权期限:">
              <el-date-picker style="width:100%" disabled size="small" value-format="yyyy-MM-dd HH:mm:ss" v-model="cqqx"
                type="datetimerange" range-separator="至" start-placeholder="" end-placeholder="">
              </el-date-picker>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="租赁期限:">
              <el-date-picker style="width:100%" disabled size="small" value-format="yyyy-MM-dd HH:mm:ss" v-model="zlqx"
                type="datetimerange" range-separator="至" start-placeholder="" end-placeholder="">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理费期限:">
              <el-date-picker style="width:100%" disabled size="small" value-format="yyyy-MM-dd HH:mm:ss"
                v-model="glfqx" type="datetimerange" range-separator="至" start-placeholder=""
                end-placeholder="">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="车位状态:">
              <div style="display: flex;align-items: center;">
                <div style="width: 10px;height: 10px;border-radius: 100px;margin-right: 20px;"
                  :style="{ backgroundColor: detailForm.parkingStatus == '0' ? '#81b337' : '#bd3124' }"></div>
                <span>{{ detailForm.parkingStatus == '0' ? '空闲' : '已满' }}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最近停靠车牌号:">
              <el-input size="small" v-model="detailForm.parkingCarNumber" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最近停靠车主姓名:">
              <el-input size="small" v-model="detailForm.parkingCarOwnerName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式:">
              <el-input size="small" v-model="detailForm.parkingCarOwnerPhoneNumber" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="最近入场时间:">
              <el-input size="small" v-model="detailForm.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最近离场时间:">
              <el-input size="small" v-model="detailForm.name" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 详情结束 -->
    </div>
    <el-divider></el-divider>
    <el-tabs type="border-card" v-model="tabsType">
      <el-tab-pane label="车辆绑定" name="car">
        <el-button type="primary" @click="addClick">新增</el-button>
        <el-table :data="carData" style="width: 100%;margin-top: 10px;">
          <el-table-column align="center" prop="carImageUrl" label="车辆照片">
            <template slot-scope="scope">
              <el-image v-if="scope.row.carImageUrl" style="width: 80px; height: 60px" :src="scope.row.carImageUrl"
                :preview-src-list="[...scope.row.carImageUrl]">
              </el-image>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="licensePlateNumber" label="车牌号">
          </el-table-column>
          <el-table-column align="center" prop="name" label="车主姓名">
          </el-table-column>
          <el-table-column align="center" prop="phoneNumber" label="联系方式">
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="绑定时间">
          </el-table-column>
          <el-table-column align="center" label="操作" width="120px">
            <template slot-scope="scope">
              <div class="textBtn">
                <el-row>
                  <el-col class="el" :span="24">
                    <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                      @click="unbindClick(scope.row)">解绑</span>
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 选择弹窗 -->
    <el-dialog class="dialogStyle" :close-on-click-modal="false" width="600px" title="绑定车辆"
      :visible.sync="bindCarPopShow">
      <el-divider></el-divider>
      <div style="display: flex;justify-content: space-between;margin: 20px 0;align-items: center;">
        <el-input size="medium" style="width: 200px;" v-model="bindCarPopKey1" placeholder="根据车牌号搜索"></el-input>
        <el-input size="medium" style="width: 200px;" v-model="bindCarPopKey2" placeholder="根据手机号搜索"></el-input>
        <el-button size="medium" type="primary" @click="bindCarPopSouSuo">查询</el-button>
      </div>
      <div class="popTableStyle">
        <span v-if="notFound" style="display: block;
    width: 100%;
    text-align: center;
    margin: 75px auto;
    font-size: 20px;
    cursor: pointer;" @click="goCreate">未检索到数据，请在用户端创建车辆信息</span>
        <el-table v-else ref="selectTable" empty-text="请输入搜索条件进行查询" :data="bindCarPopData" style="width: 100%"
          height="400px" >
          <el-table-column align="center" prop="licensePlateNumber" label="车牌号">
          </el-table-column>
          <el-table-column align="center" prop="userName" label="车主姓名">
            <!-- <template slot-scope="scope">
              {{ scope.row.unitType == 'agency' ? '机关' : scope.row.unitType
        == 'company' ? '机构' : '系统' }}
            </template> -->
          </el-table-column>
          <el-table-column align="center" prop="phoneNumber" label="手机号码">
          </el-table-column>
          <el-table-column align="center" label="操作" width="150px">
            <template slot-scope="scope">
              <div class="textBtn">
                <el-row>
                  <el-col class="el" :span="24">
                    <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                      @click="bindClick(scope.row)">绑定</span>
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-divider></el-divider>
      <!-- <div slot="footer" style="display: flex;justify-content: space-evenly;align-items: center;height: 60px;">
        <el-button @click="bindCarPopShow = false">取 消</el-button>
        <el-button type="primary" @click="bindCarPopOk">确
          定</el-button>
      </div> -->

    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailForm: {},
      tabsType: 'car',
      carData: [],
      // 绑定车辆弹窗=======================
      bindCarPopShow: false,
      bindCarPopKey1: '',
      bindCarPopKey2: '',
      bindCarPopType: '',
      bindCarPopData: [],
      notFound: false,
      cqqx: [],
      zlqx: [],
      glfqx: [],
      // =======================绑定车辆弹窗
    }
  },
  activated() {
    this.getDetail()
    this.getBindCarList()
  },
  methods: {

    goCreate() {
      this.bindCarPopShow = false
      this.$router.push('/car/carManagement')
    },
    getBindCarPopData() {

    },
    addClick() {
      this.bindCarPopShow = true
      this.notFound = false
      this.bindCarPopKey1 = ''
      this.bindCarPopKey2 = ''
      this.bindCarPopData = []
    },
    async bindCarPopSouSuo() {

      let res = await this.$api.car.myGetCarInfoAccurately({
        "licensePlateNumber": this.bindCarPopKey1, //车牌号
        "phoneNumber": this.bindCarPopKey2 //用户账号(手机号)
      })
      if (res.code == 200) {
        this.bindCarPopData = res.data

        if (res.data.length == 0) {
          this.notFound = true
        } else {
          this.notFound = false
        }
      } else {
        this.$message.error(res.message)
      }
    },
    bindCarPopOk() {

    },
    bindClick(row) {
      this.$confirm('是否绑定该车辆?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$api.car.myBindingCar({
          "spaceId": this.$route.query.id, //车位id 必传
          "carId": row.id //车辆id 必传
        })

        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '绑定成功!'
          });
          this.getBindCarList()
          this.bindCarPopShow = false
        } else {
          this.$message.error(res.message)
        }

      })
    },
    unbindClick(row) {
      console.log(row,);
      this.$confirm('此操作将解绑该车辆, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$api.car.myUnBindingCar({
          "spaceId": this.$route.query.id, //车位id 必传
          "carId": row.id //车辆id 必传
        })

        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '解绑成功!'
          });
          this.getBindCarList()
        } else {
          this.$message.error(res.message)
        }

      })
    },
    async getBindCarList() {
      let res = await this.$api.car.myGetBindingCarList({
        "spaceId": this.$route.query.id //车位id 必传
        // "spaceId": 5//车位id 必传
      })

      if (res.code == 200) {
        this.carData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    async getDetail() {
      let res = await this.$api.car.myParkingSpaceDetail(this.$route.query.id)
      console.log(res, 'qwdqwd');
      if (res.code == 200) {
        this.detailForm = res.data
        if (this.detailForm.propertyTermStart && this.detailForm.propertyTermEnd) {
          this.cqqx = [this.detailForm.propertyTermStart, this.detailForm.propertyTermEnd]
        }else{
          this.cqqx = []
        }
        if (this.detailForm.tenantTermStart && this.detailForm.tenantTermEnd) {
          this.zlqx = [this.detailForm.tenantTermStart, this.detailForm.tenantTermEnd]
        }else{
          this.zlqx = []
        }
        if (this.detailForm.managementFeesStart && this.detailForm.managementFeesEnd) {
          this.glfqx = [this.detailForm.managementFeesStart, this.detailForm.managementFeesEnd]
        }else{
          this.glfqx = []
        }


      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.wholePage {
  margin: 20px 0;

  /deep/ .el-form-item {
    margin: 0;
  }
}

.dialogStyle {
  /deep/ .el-dialog {
    border-radius: 20px;

    .el-dialog__body {
      padding: 0 20px;

      .el-divider {
        margin: 20px 0;
      }
    }
  }
}
</style>